<template>
  <div class="changeSalarys">
    <div class="top">
      <div class="image"><img src="@/assets/common/img.jpeg" alt=""></div>
      <div class="info">
        <div><strong>{{ changeSalaryDetail.username }}</strong></div>
        <div>
          <strong>部门：</strong>
          {{ changeSalaryDetail.departmentName }}
        </div>
        <div>
          <strong>入职时间：</strong>
          {{ changeSalaryDetail.timeOfEntry | formatDate }}
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-form ref="changeSalaryForm" :model="changeSalaryForm" label-width="110px" class="demo-ruleForm">
        <el-form-item label="调整基本工资" label-width="100px">
          <el-input v-model="userSalaryDetail.currentBasicSalary" disabled style="width: 220px;" />
          <span class="Label">→</span>
          <el-input v-model="changeSalaryForm.currentBasicSalary" style="width: 220px;" placeholder="请输入调整后基本工资" />
        </el-form-item>
        <el-form-item label="调整岗位工资" label-width="100px">
          <el-input v-model="userSalaryDetail.currentPostWage" disabled style="width: 220px;" />
          <span class="Label">→</span>
          <el-input v-model="changeSalaryForm.currentPostWage" style="width: 220px;" placeholder="请输入调整后岗位工资" />
        </el-form-item>
        <el-form-item label="工资合计" label-width="100px">
          <el-input v-model="computeCurrentTotal" disabled style="width: 220px;" />
          <span class="Label">→</span>
          <el-input v-model="computeChangeTotal" style="width: 220px;" disabled />
        </el-form-item>
        <el-form-item label="调整幅度" label-width="100px">
          <el-input v-model="computeChangeSize" disabled style="width: 220px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnOk">保存</el-button>
          <el-button @click="btnCancel">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { wageSalary } from '@/api/salarys'
export default {
  props: {
    userSalaryDetail: {
      type: Object,
      required: true
    },
    changeSalaryDetail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      changeSalaryForm: {
        currentBasicSalary: '',
        currentPostWage: ''
      }
      // rules: {
      //   currentBasicSalary: [
      //     { required: true, message: '此项不能为空', trigger: 'blur' },
      //     { type: 'number', trigger: 'blur', message: '此项必须为数字类型' }
      //   ],
      //   currentPostWage: [
      //     { required: true, message: '此项不能为空', trigger: 'blur' },
      //     { type: 'number', trigger: 'blur', message: '此项必须为数字类型' }
      //   ]
      // }
    }
  },
  computed: {
    // 计算调薪前的工资合计
    computeCurrentTotal() {
      return this.computedCount(this.userSalaryDetail.currentBasicSalary, this.userSalaryDetail.currentPostWage)
    },
    // 计算调薪后的工资合计
    computeChangeTotal() {
      return this.computedCount(this.changeSalaryForm.currentBasicSalary, this.changeSalaryForm.currentPostWage)
    },
    // 调整幅度：计算调薪后 - 调薪前 的合计
    computeChangeSize() {
      return this.computeChangeTotal - this.computeCurrentTotal
    }
  },
  methods: {
    // 计算合计 函数
    computedCount(baseSalsry, postSalary) {
      let base = 0
      let post = 0
      if (baseSalsry !== null) {
        base = Number(baseSalsry)
      }
      if (postSalary !== null) {
        post = Number(postSalary)
      }
      return base + post
    },
    // 点击保存 处理函数
    async btnOk() {
      // 发送请求
      await wageSalary({ userId: this.userSalaryDetail.userId, ...this.changeSalaryForm })
      // 提示用户
      this.$message.success('调薪成功')
      // 关闭弹窗
      this.$emit('close')
      // 重新加载页面
      this.$emit('refresh')
    },
    btnCancel() {
      // 清空表单
      this.changeSalaryForm = {}
      // 关闭弹窗
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';
.changeSalarys{
  box-sizing: border-box;
  .top {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 20px;
  .image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #ccc;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info{
    height: 80px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-top: 10px;
  }
}
.Label{
      margin: 0 20px;
      color:#999;
    }
}

</style>
